<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :isOpacity="false" :maxOpacity="1" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle" shadow>
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack('pages/user/index')"></view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="deposit-box">
				<view class="title">提现金额</view>
				<view class="input-box" @tap="inputFocus">
					<view class="fu">￥</view>
					<view class="inputFocus">
						<!-- <input disabled v-model="depositValue" /> -->
						<view class="">{{depositValue}}</view>
					</view>
					<view class="remaining">可用余额 ¥{{balance}}</view>
				</view>
				<view class="hite" v-if="Number(depositValue) > balance">输入金额超过可用余额</view>
				<view class="withdraw">
					<view class="withdraw-title">提现至</view>
					<view class="bank">{{bankName}}</view>
				</view>
			</view>
		</view>
		<keyboard ref="keyboard" @getnum_="onDeposit" @ongetnum_="ongetnum" :balance="balance"></keyboard>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	import keyboard from './components/keyboard/keyboard.vue';
	const app = getApp();
	import {
		moneyFormat
	} from "@/utils/util.js";
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {
			keyboard
		},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '提现', //标题
				walletHint: "您有部分收入暂处于客诉保护期(订单完成后48小时内)不可提现，到期且无售后情况下，该笔金额将变为可提现状态。",
				value1: '',
				value2: '',
				remaining: 0,
				depositValue: '',
				list: [{
					name: '解除绑定',
					lable: 'remove'
				}, {
					name: '取消',
					lable: 'cancel'
				}],
				bankId: null,
				bankName: null,
				balance: null,
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			this.bankId = options.bankId
			this.bankName = options.bankName
			this.balance = options.balance
		},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		/**
		 * 计算属性
		 */
		computed: {},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},

			inputFocus() {
				console.log(1);
				this.$refs.keyboard.openfun()
			},
			closeBottomPop() {
				this.$refs.popupBottom.close();
			},
			// deDeposit() {
			// 	this.$refs.popupBottom.open();
			// },
			onDeposit() {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				throttle(app._post_form(
					"/client/user-account/withdraw", {
						"withdrawFee": that.depositValue
					},
					(result) => {
						setTimeout(() => {
							that.$refs.toast.show({
								type: 'success',
								message: "提现成功"
							})
							setTimeout(() => {
								that.$refs.toast.hide()
							}, 1000)
							that.balance = that.balance - that.depositValue
							that.depositValue = ''
						}, 200)
					}, null, () => {
						that.$refs.toast.hide()
					}
				), 1000, true)
			},
			ongetnum(e) {
				this.depositValue = e
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #F6F8F7;
		position: relative;
		z-index: 1;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}


		.main {
			box-sizing: border-box;
			padding: 212rpx 24rpx 66rpx;
			/* #ifdef H5 */
			padding: 124rpx 24rpx 66rpx;
			/* #endif */
			height: 100%;

			.deposit-box {
				width: 702rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 28rpx;

				.title {
					font-size: 26rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					margin-bottom: 53rpx;
				}
			}

			.hite {
				font-size: 26rpx;
				font-weight: 400;
				color: #FF4664;
				line-height: 37rpx;
				margin-bottom: 37rpx;
			}

			.input-box {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				border-bottom: 2rpx solid #E3E9E5;
				box-sizing: border-box;
				padding-bottom: 24rpx;
				margin-bottom: 37rpx;

				.fu {
					font-size: 44rpx;
					font-weight: 900;
					color: #282D2D;
				}

				.inputFocus {
					flex: 1;
					font-size: 44rpx;
				}

				.remaining {
					font-size: 26rpx;
					font-weight: 400;
					color: #999B9B;
				}
			}

			.withdraw {
				font-size: 26rpx;
				font-weight: 400;
				color: #282D2D;
				line-height: 37rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bank {}
			}
		}
	}
</style>